<html>
<head>
  <title>Canvas Clock Demo</title>
<script>
// Wait for the browser to load
window.onload = function() {
  // Draw the clock
  clock();

  // and re-draw the clock every second thereafter
  setInterval(clock, 1000);
};

function clock() {
  // Get the current date and time
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr >= 12 ? hr - 12 : hr;

  // Get the drawing context of the canvas element
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.save();
    // Initalize the drawing canvas
    ctx.clearRect(0,0,150,150);

    // When we draw at 0,0 we're actually drawing at 75,75
    ctx.translate(75,75);

    // Drawing a 100px line actually draws a 40px line
    ctx.scale(0.4,0.4);

    // Start the cursor rotated at 12:00
    ctx.rotate(-Math.PI/2);

    // Initalize the drawing properties
    ctx.strokeStyle = "black";
    ctx.fillStyle = "black";
    ctx.lineWidth = 8;
    ctx.lineCap = "round";
  
    // Hour marks
    ctx.save();
      ctx.beginPath();
        // For each hour
        for ( var i = 0; i < 12; i++ ) {
          // Rotate the canvas 1/12th of the way
          // (remember: A circle = 2 * PI)
          ctx.rotate(Math.PI/6);

          // Move the cursor to near the outside of the canvas
          ctx.moveTo(100,0);

          // and draw a short (20px) tick
          ctx.lineTo(120,0);
        }
      ctx.stroke();
    ctx.restore();

    // Minute marks
    ctx.save();
      // These ticks will be lighter than the hours
      ctx.lineWidth = 5;

      ctx.beginPath();
        // For each minute
        for ( var i = 0; i < 60; i++ ) {
          // except for the minutes that are 'on the hour'
          if ( i % 5 != 0 ) {
            // Move the cursor farther out
            ctx.moveTo(117,0);

            // And draw a short (3px) line
            ctx.lineTo(120,0);
          }

          // Rotate the canvas 1/60th of the way around
          ctx.rotate(Math.PI/30);
        }
      ctx.stroke();
    ctx.restore();
  
    // Draw Hour Hand
    ctx.save();
      // Rotate the canvas to the correct position
      ctx.rotate( (Math.PI/6) * hr + (Math.PI/360) * min + (Math.PI/21600) * sec )

      // This line is going to be wide
      ctx.lineWidth = 14;

      ctx.beginPath();
        // Start drawing from just off-center (making it look like a clock hand)
        ctx.moveTo(-20,0);

        // And draw to near the hour ticks
        ctx.lineTo(80,0);
      ctx.stroke();
    ctx.restore();

    // Draw Minute Hand
    ctx.save();
      // Rotate the canvas to the current minute position
      ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec )

      // This line will be thinner than the hour hand
      ctx.lineWidth = 10;

      ctx.beginPath();
        // But it's also longer, so set it farther back
        ctx.moveTo(-28,0);

        // And draw it farther out
        ctx.lineTo(112,0);
      ctx.stroke();
    ctx.restore();
  
    // Draw Second Hand
    ctx.save();
      // Rotate the canvas to the current second position
      ctx.rotate(sec * Math.PI/30);

      // This line will be redish
      ctx.strokeStyle = "#D40000";
      ctx.fillStyle = "#D40000";

      // and thinner than the other hands
      ctx.lineWidth = 6;

      ctx.beginPath();
        // But also set farther back
        ctx.moveTo(-30,0);

        // But stubbier
        ctx.lineTo(83,0);
      ctx.stroke();
    ctx.restore();

    // Outside Blue Circle
    ctx.save();
      // The border will be wide
      ctx.lineWidth = 14;

      // and blue-ish
      ctx.strokeStyle = '#325FA2';

      ctx.beginPath();
        // Draw a complete circle, 142px out
        ctx.arc(0,0,142,0,Math.PI*2,true);
      ctx.stroke();
    ctx.restore();

  ctx.restore();
}
</script>
</head>
<body>
  <canvas id="canvas" height="150" width="150"></canvas>
</body>
</html>

